<template>
  <view>
    <t-cropper mode="ratio" :imageUrl="imageUrl" :width="200" :height="200" @cancel="onCancel" @confirm="onConfirm"></t-cropper>
  </view>
</template>
 
<script setup>
import uploadFn from "@/utils/upload";
import { setItem } from "@/utils/storage";
import useStore from "@/store";
const { common } = useStore();
const imageUrl = ref("");
const btnLoading = ref(false);
const init = () => {
  const url = common.uploadImg;
  imageUrl.value = url;
};
// 关闭裁剪
const onCancel = () => {
  imageUrl.value = "";
  btnLoading.value = false;
  common.updateUploadImg("");
  uni.navigateBack({
    delta: 1,
  });
};

// 裁剪确认
const onConfirm = async (res) => {
  if (btnLoading.value) return;
  btnLoading.value = true;
  const { img } = await uploadFn(res.tempFilePath, "image");

  if (!img) return;
  uni.showToast({
    title: "上传成功，等待审核中…",
    icon: "none",
  });

  common.updateUploadImg(img);
  imageUrl.value = "";
  btnLoading.value = false;
  uni.navigateBack({
    delta: 1,
  });
};
onLoad(() => {
  init();
});
</script>
 
<style lang='scss' scoped>
.cropper-box {
  width: 100vw;
  height: 100vh;
}
</style>